<template>
	<div class="bg">
		<div class="top">
			<el-input
			      v-model="input"
			      placeholder="搜索"
			      class="input-with-select"
				  clearable 
			    >
			      <template #append>
			        <el-button @click="searchList" :icon="Search" />
			      </template>
			    </el-input>
			  <el-button class="add" @click="addlist">添加</el-button>
		</div>
		<div class="main">
			<el-table :data="tableData" style="width: 100%">
			    <el-table-column prop="id" label="序号" />
			    <el-table-column prop="name" label="名称" />
			    <el-table-column prop="user" label="作者" />
				<el-table-column prop="gread" label="评分" />
				<el-table-column prop="type" label="类型" />
				<el-table-column prop="price" label="定价" />
				<el-table-column  label="操作" >
					 <template #default="scope">
					 <el-icon >
					      <Edit @click="editList(scope.row)"/>
					    </el-icon>
						<el-icon >
						      <Delete @click="deleteList(scope.row.id)" />
						</el-icon>
					 </template>
				</el-table-column>
			  </el-table>
		</div>
		<diaog :dialogVisible="dialogVisible" :form="form"
		 :title="title" @centel="centel"
			@confirm="confirm"/>
	</div>
</template>
<script setup>
import {
	  Delete, Edit,Search
	} from '@element-plus/icons-vue'
import diaog from './diaog.vue'
import { ref,getCurrentInstance,onMounted } from 'vue'
const {proxy} = getCurrentInstance()
const input=ref('')
const form=ref({})
const title=ref("")
const dialogVisible=ref(false)
const addlist=()=>{
	form.value={}
	title.value="添加"
	dialogVisible.value=true
	
}
const editList=(item)=>{
	form.value=item
	title.value="修改"
	console.log(item);
	dialogVisible.value=true
}
const deleteList=async(item)=>{
	const res = await proxy.$http.serve.deletelist({id:item})
	console.log(item);
	getData()
}
const confirm=async (item)=>{
	dialogVisible.value=false
	if(title.value=='添加'){
		const res = await proxy.$http.serve.add(item.value)
	}
	else{
		const res = await proxy.$http.serve.edit(item.value)
	}
	getData()
}
const centel=()=>{
	dialogVisible.value=false
}
const searchList=async()=>{
	const {data: res} = await proxy.$http.serve.seach({item:input.value})
	tableData.value=res
}
const tableData = ref([])
const getData= async ()=>{
	const {data: res} = await proxy.$http.serve.getPage()
	tableData.value=res
	console.log(res);
}
onMounted(()=>{
	getData()
})
</script>

<style scoped>
	.bg{
		width: 90vw;
		height: 90vh;
		margin: 5vh auto;
	}
	.top{
		height: 10vh;
		width: 90%;
		margin: 0 auto;
	}
	.main{
		width: 90%;
		margin: 0 auto;
		border: 1px solid #ccc;
	}
	.el-icon{
		font-size: 2rem;
	}
	.input-with-select{
		width: 50%;
	}
	.add{
		float: right;
	}
</style>
